{% load static from staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Enrichment Viewer</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{% static 'functional/css/style.css' %}">
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12707805-4"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-12707805-4');
        </script>
    </head>
    <body>
        <div id="message">
            <ul>
                <li>These charts are interactive. Try hovering over the proteins and drugs in the list and dragging the proteins.</li>
                <li>
                    The thickness of the link between 2 proteins is proportional to the strength of their predicted functional association.
                </li>
                <li>
                    It performs better on a desktop browser.
                </li>
            </ul>
        </div>
        <div id='container'>
            <div>
                <p>
                    Drug: <span id='drugbank_id'></span><br>
                    Network: <span id='network'></span>
                </p>
            </div>
            <div></div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.2/math.min.js"></script>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="{% static 'functional/js/graph.js' %}"></script>
        <script src="{% static 'functional/js/enrichment.js' %}"></script>
        <script src="{% static 'functional/js/protein-complex.js' %}"></script>
        
        <script>
            var queryVars = new URLSearchParams(window.location.search);
            var drug = "{{ drug }}";
            var net = "{{ net }}";

            var drug_info = document.getElementById('drugbank_id');
            drug_info.innerHTML=drug;

            var network = document.getElementById('network');
            network.innerHTML=net;

            var complexData;
            var container = document.getElementById('container');
            fetch("{{ information_url }}")
            .then(response => response.json())
            .then(data => complexData=data.sort((a,b) => {
                    var covid_a = a.proteins.filter(p => p.is_covid);
                    var covid_b = b.proteins.filter(p => p.is_covid);
                    //return covid_b.length - covid_a.length;
                    return b.proteins.length - a.proteins.length;
                }).filter(a => a.proteins.length <= 80)
            )
            .then(()=>{
                drug_info.innerHTML = `${drug} (${complexData[0].drug_name})`;
                for(var i = 0; i < complexData.length; i++) {
                    var complex = complexData[i];
                    // create elements
                    
                    // graph
                    var graph = document.createElement('div');
                    var graph_id = `graph-${complex.complex_id}`;
                    graph.setAttribute('id', graph_id);
                    container.appendChild(graph);

                    // GO enrichment
                    var enrichment = document.createElement('div');
                    var enrichment_id = `enrichment-${complex.complex_id}`;
                    enrichment.setAttribute('id', enrichment_id);
                    enrichment.setAttribute('class', 'enrichment-container');
                    container.appendChild(enrichment);

                    // biological process
                    var bp = document.createElement('div');
                    var bp_id = `enrichment_bp-${complex.complex_id}`;
                    bp.setAttribute('id', bp_id);
                    var title_bp = document.createElement('p');
                    title_bp.innerHTML = 'Biological Process';
                    bp.appendChild(title_bp);
                    enrichment.appendChild(bp);

                    // molecular function
                    var mf = document.createElement('div');
                    var mf_id = `enrichment_mf-${complex.complex_id}`;
                    mf.setAttribute('id', mf_id);
                    var title_mf = document.createElement('p');
                    title_mf.innerHTML = 'Molecular Function';
                    mf.appendChild(title_mf);
                    enrichment.appendChild(mf);

                    // cellular component
                    var cc = document.createElement('div');
                    var cc_id = `enrichment_cc-${complex.complex_id}`;
                    cc.setAttribute('id', cc_id);
                    var title_cc = document.createElement('p');
                    title_cc.innerHTML = 'Cellular Component';
                    cc.appendChild(title_cc);
                    enrichment.appendChild(cc);

                    var graph_chart = new ProteinComplex(graph_id, complex.complex_id);
                    var enrichment_bp = new Enrichment(bp_id, 'GO_Biological_Process_2018', complex.complex_id);
                    var enrichment_mf = new Enrichment(mf_id, 'GO_Molecular_Function_2018', complex.complex_id);
                    var enrichment_cc = new Enrichment(cc_id, 'GO_Cellular_Component_2018', complex.complex_id);
                }


            });
        </script>
        
    </body>
</html>